<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <!-- 简单的p标签 -->
    <p>{{ message }}</p>
    
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script setup>
import { storage } from '../utils/storage'
import { useRouter } from 'vue-router'

// 简单的变量
const message = '请登录后继续使用'
const router = useRouter()

// 登录处理
const handleLogin = () => {
  // 模拟登录
  storage.set('token', 'mock-token-' + Date.now())
  storage.set('userInfo', {
    username: 'testuser',
    avatar: 'https://picsum.photos/200'
  })
  
  // 跳转到首页或之前的页面
  const redirect = router.currentRoute.value.query.redirect || '/home'
  router.push(redirect)
}
</script>

<style scoped>
/* 简单的加粗样式 */
p {
  font-weight: bold;
  padding: 20px;
  text-align: center;
}

.login-container {
  max-width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
